<template>
	<el-row :gutter="24" v-if="tableShow">
		<el-col :span="24">
			<el-row :gutter="24">
				<el-col :span="24">
					<div style="height: 1.5em;"></div>
				</el-col>
				<el-col :span="24">
					<div class="table-d">
						<el-collapse v-model="activeNamec">
							<el-collapse-item title="车辆档案" name="1">
								<el-row :gutter="24" style="text-align: right;padding-right: 30px;">
									<span v-for="item in tableData.CarTabel">
													<el-tag type="primary" >
														{{item.label}}
													</el-tag>&nbsp;
										</span>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="24">
										<div style="height: 0.5em;"></div>
									</el-col>
								</el-row>
								<table width="100%" border="0" cellspacing="1" cellpadding="10" style="color:rgb(103,106,108);font-size: 10px;">
									<tr>
										<td width="15" rowspan="6"><b>{{tableData.CarInfo.dataList[0].plateNum}} <el-tag type="primary">本公司</el-tag><br />
											{{tableData.CarInfo.dataList[0].seiries}}<br/>
											{{tableData.CarInfo.dataList[0].configure}}<br/>
											车辆年份：{{tableData.CarInfo.dataList[0].modelYear}}<br/>
											颜色:{{tableData.CarInfo.dataList[0].color}}<br/>
										</b></td>
										<td width="15"><b>VIN</b></td>
										<td width="15"><b>发动机号</b></td>
										<td width="15"><b>购车日期</b></td>
										<td width="15"><b>销售顾问</b></td>
									</tr>
									<tr>
										<td>{{tableData.CarInfo.dataList[0].vin}}</td>
										<td>{{tableData.CarInfo.dataList[0].engineNum}}</td>
										<td>{{buyDates}}</td>
										<td>{{tableData.CarInfo.dataList[0].saler}}</td>
									</tr>
									<tr>
										<td><b>上牌日期</b></td>
										<td><b>保修开始日期</b></td>
										<td><b>第一次进场</b></td>
										<td><b>维修起始里程数</b></td>
									</tr>
									<tr>
										<td>{{licenceDates}}</td>
										<td>{{guaranteeStartDates}}</td>
										<td>{{firstEnterDates}}</td>
										<td>{{tableData.CarInfo.dataList[0].maintainStartMile}}</td>
									</tr>
									<tr>
										<td><b>最后行驶里程</b></td>
										<td><b>上次维修日期</b></td>
										<td><b>下次保养日期</b></td>
										<td><b>下次保养里程</b></td>
									</tr>
									<tr>
										<td>{{tableData.CarInfo.dataList[0].runMile}}</td>
										<td>{{lastMaintainDates}}</td>
										<td>{{nextMaintainDate}}</td>
										<td>{{tableData.CarInfo.dataList[0].nextMaintainMile}}</td>
									</tr>
								</table>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
				<el-col :span="24">
					<div style="height: 1.5em;"></div>
				</el-col>
				<el-col :span="24">
					<div class="table-d">
						<el-collapse v-model="activeNamecc">
							<el-collapse-item title="客户资料" name="1">
								<table width="100%" border="0" cellspacing="1" cellpadding="10" style="color:rgb(103,106,108);font-size: 10px;">
									<tr>
										<td width="15" colspan="3"><b>车主信息  {{tableData.CarInfo.dataList[0].ownerName}} {{tableData.CarInfo.dataList[0].senderGender}}[{{tableData.CarInfo.dataList[0].ownerProperty}}用车] [编码：{{tableData.CarInfo.dataList[0].ownerCode}}]</b></td>
									</tr>
									<tr>
										<td><b>车主资料</b></td>
										<td><b>联系人:{{tableData.CarInfo.dataList[0].ownerName}} {{tableData.CarInfo.dataList[0].senderGender}}</b></td>
										<td><b>送修人：{{tableData.CarInfo.dataList[0].manitainSender}} {{tableData.CarInfo.dataList[0].senderGender}}</b></td>
									</tr>
									<tr>
										<td>出生日期：{{tableData.CarInfo.dataList[0].ownerBirthday}}
											<br />联系方式：
											<el-tag type="primary">{{tableData.CarInfo.dataList[0].ownerTel}}</el-tag>
											<br />地址：{{tableData.CarInfo.dataList[0].ownerAddress}}
											<br />所在行业：{{tableData.CarInfo.dataList[0].ownerTrader}} 家庭月收入：{{tableData.CarInfo.dataList[0].ownerMonthIncome}} 婚姻状况：{{tableData.CarInfo.dataList[0].ownerMarry}} 学历：{{tableData.CarInfo.dataList[0].ownerEducation}}
										</td>
										<td>联系方式：
											<el-tag type="primary">{{tableData.CarInfo.dataList[0].contactTel}}</el-tag>
											<br />联系人地址：{{tableData.CarInfo.dataList[0].contactAddress}}</td>
										<td>联系方式：
											<br/>
											<el-tag type="primary">{{tableData.CarInfo.dataList[0].senderTel}}</el-tag>
										</td>
									</tr>
									<tr>
										<td colspan="3"><b>用户标签:
													<span v-for="item in tableData.CustomerTabel">
													<el-tag type="primary" >
														{{item.label}}
													</el-tag>&nbsp;
													</span>
													</b></td>
									</tr>
								</table>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
				
				<el-col :span="24">
					<div style="height: 1.5em;"></div>
				</el-col>
				<el-col :span="24">
					<div class="table-d">
						<el-collapse v-model="activeNameK">
							<el-collapse-item title="卡信息" name="1">
								<el-table :data="tableData.cardTabel" stripe border height="250">
									<el-table-column prop="cardNum" label="卡号" width="180px">
									</el-table-column>
									<!--<el-table-column prop="cardType" label="卡类型" width="80px">
									</el-table-column>-->
									<!--<el-table-column prop="telNum" label="手机号" width="100px">
									</el-table-column>-->
									<el-table-column prop="item" label="项目" width="180px">
									</el-table-column>
									<el-table-column prop="value" label="剩余值" width="80px">
									</el-table-column>
									<el-table-column prop="unitType" label="单位" width="80px">
									</el-table-column>
									<el-table-column label="开始日期" :formatter="cardStartDates" width="120px">
									</el-table-column>
									<el-table-column label="截止日期" :formatter="cardEndDates" width="120px">
									</el-table-column>
									<el-table-column prop="storeName" label="门店" width="100px">
									</el-table-column>
								</el-table>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
				
				<el-col :span="24">
					<div style="height: 1.5em;"></div>
				</el-col>
				<el-col :span="24">
					<div class="table-d">
						<el-collapse v-model="activeNames">
							<el-collapse-item title="售后工单" name="1">
								<el-tag type="success">售后总产值:￥{{tableData.WorkOrderProperty.sum}}</el-tag>
								<el-tag type="success">一年内产值:￥{{tableData.WorkOrderProperty.sumOfYear}}</el-tag>
								<el-tag type="success">总进场次数:{{tableData.WorkOrderProperty.totalIn}}次</el-tag>
								<el-tag type="success">一年内进场次数:{{tableData.WorkOrderProperty.totalInYear}}次</el-tag>
								<el-tag type="warning">首次进厂时间:{{countTime(tableData.WorkOrderProperty.firstEnterDate)}}</el-tag>
								<el-row :gutter="24">
									<el-col :span="24">
										<div style="height: 0.5em;"></div>
									</el-col>
								</el-row>
								<el-table :data="tableData.CarAfterSale.dataList" style="width: 100%" @row-click="orderClick">
									<el-table-column type="expand">
										<template scope="props">
											<el-form label-position="left" inline>
												<el-form-item label="收款金额">
													<span>{{ props.row.receiveAmount }}</span>
												</el-form-item>
												<el-form-item label="工单类别">
													<span>{{ props.row.type }}</span>
												</el-form-item>
												<el-form-item label="出厂里程">
													<span>{{ props.row.runMile }}</span>
												</el-form-item>
												<el-form-item label="竣工日期">
													<span>{{ countTime(props.row.finishDate) }}</span>
												</el-form-item>
												<el-form-item label="工单号">
													<span>{{ props.row.orderNum }}</span>
												</el-form-item>
												<el-form-item label="接待">
													<span>{{ props.row.receptor }}</span>
												</el-form-item>
												<el-form-item label="维修金额">
													<span>{{ props.row.maintainAmount }}</span>
												</el-form-item>
												<el-form-item label="开单日期">
													<span>{{countTime(props.row.openDate) }}</span>
												</el-form-item>
												<el-form-item label="预计交车时间">
													<span>{{countTime(props.row.expectDate) }}</span>
												</el-form-item>
												<el-form-item label="索赔单号">
													<span>{{ props.row.demandNum }}</span>
												</el-form-item>
												<el-form-item label="结算日期">
													<span>{{countTime(props.row.balanceDate)}}</span>
												</el-form-item>
												<el-form-item label="交车日期">
													<span>{{countTime(props.row.sendCarDate) }}</span>
												</el-form-item>
												<el-form-item label="结清日期">
													<span>{{countTime(props.row.clearDate)  }}</span>
												</el-form-item>
												<el-form-item label="车牌号">
													<span>{{ props.row.plateNum }}</span>
												</el-form-item>
												<el-form-item label="送修人">
													<span>{{ props.row.sender }}</span>
												</el-form-item>
												<el-form-item label="维修类别">
													<span>{{ props.row.maintainType }}</span>
												</el-form-item>
												<el-form-item label="状态">
													<span>{{ props.row.status }}</span>
												</el-form-item>
											</el-form>
										</template>
									</el-table-column>
									<el-table-column label="开单日期" prop="openDate" width="130px" :formatter="openDates">
									</el-table-column>
									<el-table-column label="工单号" width="170px" prop="orderNum">
									</el-table-column>
									<el-table-column label="维修类别" width="130px"  prop="maintainType">
									</el-table-column>
									<el-table-column label="产值" width="130px" prop="realAmount">
									</el-table-column>
									<el-table-column label="出厂里程" width="130px" prop="runMile">
									</el-table-column>
								</el-table>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
				<el-col :span="24">
					<div style="height: 1.5em;"></div>
				</el-col>
				<el-col :span="24">
					<!--维修工单的项目-->
					<div class="table-d">
						<el-collapse v-model="activeNamei">
							<el-collapse-item title="维修项目" name="1">
								<el-table :data="tableDataOrder.dataList" stripe border height="250">
									<el-table-column prop="orderType" width="130px" label="工单类别">
									</el-table-column>
									<el-table-column prop="maintainType" width="130px" label="维修类别">
									</el-table-column>
									<el-table-column prop="itemName" width="220px" label="项目名称">
									</el-table-column>
									<el-table-column prop="worker" width="130px" label="技师">
									</el-table-column>
									<el-table-column prop="workKind" width="130px" label="工种">
									</el-table-column>
								</el-table>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
				<el-col :span="24">
					<div style="height: 1.5em;"></div>
				</el-col>
				<el-col :span="24">
					<div class="table-d">
						<el-collapse v-model="activeName">
							<el-collapse-item title="延保记录" name="1">
								<el-table :data="tableData.exTable" stripe border height="250">
									<el-table-column prop="restartInsurance" label="合同开始" :formatter="startDates">
									</el-table-column>
									<el-table-column prop="restopInsurance" label="合同结束" :formatter="stopDates">
									</el-table-column>
									<el-table-column prop="typeName" label="延保类型">
									</el-table-column>
									<el-table-column prop="startLegend" label="开始里程">
									</el-table-column>
									<el-table-column prop="stopLegend" label="截止里程">
									</el-table-column>
								</el-table>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
				
				<el-col :span="24">
					<div style="height: 1.5em;"></div>
				</el-col>
				<el-col :span="24">
					<div class="table-d">
						<el-collapse v-model="activeNamea">
							<el-collapse-item title="合同" name="1">
								<el-table :data="tableData.inTable" stripe border height="250">
									<el-table-column label="交强险">
										<el-table-column prop="compulsoryinsurancenum" label="合同号">
										</el-table-column>
										<el-table-column label="起止日期" :formatter="comDates">
										</el-table-column>
									</el-table-column>
									<el-table-column label="商业险">
										<el-table-column prop="commercialinsurancenum" label="合同号">
										</el-table-column>
										<el-table-column label="起止日期" :formatter="comDates">
										</el-table-column>
									</el-table-column>
									<el-table-column prop="stopLegend" label="类型">
									</el-table-column>
								</el-table>
							</el-collapse-item>
						</el-collapse>
					</div>
				</el-col>
			</el-row>
		</el-col>
	</el-row>
</template>

<script>
export default {
  name: "customer",
  componentName: "customer",
  computed: {
    //购车日期
    buyDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].buyDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].buyDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].buyDate)
      ).format("YYYY-MM-DD");
    },
    //上牌日期
    licenceDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].licenceDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].licenceDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].licenceDate)
      ).format("YYYY-MM-DD ");
    },
    //保修开始日期
    guaranteeStartDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].guaranteeStartDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].guaranteeStartDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].guaranteeStartDate)
      ).format("YYYY-MM-DD ");
    },
    //第一次进场
    firstEnterDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].firstEnterDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].firstEnterDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].firstEnterDate)
      ).format("YYYY-MM-DD ");
    },
    //上次维修日期
    lastMaintainDates: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].lastMaintainDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].lastMaintainDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].lastMaintainDate)
      ).format("YYYY-MM-DD ");
    },
    //下次保养日期
    nextMaintainDate: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].nextMaintainDate == "" ||
        this.$data.tableData.CarInfo.dataList[0].nextMaintainDate == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].nextMaintainDate)
      ).format("YYYY-MM-DD ");
    },
    //车主生日
    ownerBirthdays: function() {
      if (
        this.$data.tableData.CarInfo.dataList[0].ownerBirthday == "" ||
        this.$data.tableData.CarInfo.dataList[0].ownerBirthday == null
      )
        return "";
      return this.moment(
        Number(this.$data.tableData.CarInfo.dataList[0].ownerBirthday)
      ).format("YYYY-MM-DD ");
    }
    /*---------------------------------------------------------------------------*/

    /*---------------------------------------------------------------------------*/
  },
  data: function() {
    return {
      //缩放属性
      activeNamec: ["1"],
      activeNamecc: ["1"],
      activeNames: ["1"],
      activeName: ["1"],
      activeNameK: ["1"],
      activeNamei: ["1"],
      activeNamea: ["1"],
      concatShow: false,
      page: this.page,
      CurentPage: 0,
      //界面列表的显示属性
      tableShow: true,
      //分组数据
      tableDataOrder: {
        total: 0,
        dataList: []
      },
      tableData: {
        CarInfo: {
          total: "",
          dataList: [
            {
              ownerMarry: "",
              color: "",
              concatGender: "",
              ownerCode: "",
              nextMaintainMile: "",
              ownerEducation: "",
              buyDate: "",
              typeName: "",
              saler: "",
              ownerTel: "",
              restartInsurance: "",
              contactTel: "",
              senderTel: "",
              restopInsurance: "",
              senderGender: "",
              guaranteeStartDate: "",
              ownerName: "",
              firstEnterDate: "",
              model: "",
              vin: "",
              contactAddress: "",
              compulsoryinsurancenum: "",
              brand: "",
              commercialinsurancenum: "",
              endMile: "",
              ownerBirthday: "",
              stopLegend: "",
              lastMaintainDate: "",
              contactName: "",
              engineNum: "",
              ownerGender: "",
              ownerMonthIncome: "",
              licenceDate: "",
              configure: "",
              ownerProperty: "",
              plateNum: "",
              modelYear: "",
              manitainSender: "",
              contractstartinsurance: "",
              compulsoryStartDate: "",
              startLegend: "",
              ownerAddress: "",
              ownerTrader: "",
              nextMaintainDate: "",
              maintainStartMile: ""
            }
          ]
        },
        CarAfterSale: {
          total: "",
          dataList: []
        },
        CardTabel: {
          total: "",
          dataList: []
        },
        CustomerTabel: [],
        CarTabel: [],
        exTable: [],
        inTable: [],
        WorkOrderProperty: {
          sum: "",
          sumOfYear: "",
          totalIn: "",
          totalInYear: "",
          firstEnterDate: ""
        }
      }
    };
  },

  props: {
    qType: "",
    qValue: "",
    qCompanyId: ""
  },
  methods: {
    //查询
    conQuery: function() {
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/car/page", //url
        params: {
          //发送的参数
          //key: this.qType, //查询类别
          //value: this.qValue, //查询内容
          id: this.qValue,
          companyId: this.qCompanyId
        }
      }).then(
        function(resp) {
          debugger;
          // es5写法
          //判断是否返回了数据
          if (resp.data.msg != "查询成功！") {
            this.$message("未查询到数据！");
            this.$data.tableShow = false;
          } else {
            this.$data.tableDataOrder = {
              total: 0,
              dataList: []
            };
            this.$message(resp.data.msg);
            this.$data.tableData = resp.data;
            debugger;
            this.$data.tableData.WorkOrderProperty.sum = this.$data.tableData.WorkOrderProperty.sum.toFixed(
              2
            );
            this.$data.tableData.WorkOrderProperty.sumOfYear = this.$data.tableData.WorkOrderProperty.sumOfYear.toFixed(
              2
            );
            if (this.$data.tableData.CarInfo != undefined) {
              //this.queryConcatGrid();
              //修改内容显示属性
              this.$data.tableShow = true;
            }
          }
        },
        function(error) {
          // error
          this.$message.error(resp.data.msg);
        }
      );
    },
    //点击工单的回调函数
    orderClick: function(row) {
      debugger;
      this.$http({
        method: "GET",
        url: this.API_ROOT + "/crm/workitem/page",
        params: {
          orderCode: row.orderNum,
          start: this.$data.CurentPage,
          limit: 20
        }
      }).then(
        function(resp) {
          //success
          resp.data.total = parseInt(resp.data.total);
          this.$data.tableDataOrder = resp.data;
        },
        function(error) {
          // error
        }
      );
    },
    countTime: function(val) {
      if (val == "" || val == null) return "";
      return this.moment(Number(val)).format("YYYY-MM-DD");
    },
    //保险开始时间
    startDates: function(row, column) {
      if (row.restartInsurance == "" || row.restartInsurance == null) return "";
      return this.moment(Number(row.restartInsurance)).format("YYYY-MM-DD");
    },
    //卡开始时间
    cardStartDates: function(row, column) {
      if (row.startDate == "" || row.startDate == null) return "";
      return this.moment(Number(row.startDate)).format("YYYY-MM-DD");
    },
    //卡结束时间
    cardEndDates: function(row, column) {
      if (row.endDate == "" || row.endDate == null) return "";
      return this.moment(Number(row.endDate)).format("YYYY-MM-DD");
    },
    //保险截止时间
    stopDates: function(row, column) {
      if (row.restopInsurance == "" || row.restopInsurance == null) return "";
      return this.moment(Number(row.restopInsurance)).format("YYYY-MM-DD");
    },
    //交强险起止时间
    comDates: function(row, column) {
      if (
        row.compulsoryStartDate == "" ||
        row.compulsoryStartDate == null ||
        row.compulsoryEndDate == "" ||
        row.compulsoryEndDate == null
      )
        return "";
      return (
        this.moment(Number(row.compulsoryStartDate)).format("YYYY-MM-DD") +
        "-" +
        this.moment(Number(row.compulsoryEndDate)).format("YYYY-MM-DD")
      );
    },
    //商业险起止时间
    conDates: function(row, column) {
      if (
        row.contractstartinsurance == "" ||
        row.contractstartinsurance == null ||
        row.contractstopinsurance == "" ||
        row.contractstopinsurance == null
      )
        return "";
      return (
        this.moment(Number(row.contractstartinsurance)).format("YYYY-MM-DD") +
        "-" +
        this.moment(Number(row.contractstopinsurance)).format("YYYY-MM-DD")
      );
    },
    //购车日期
    openDates: function(row, column) {
      if (row.openDate == "" || row.openDate == null) return "";
      return this.moment(Number(row.openDate)).format("YYYY-MM-DD");
    }
  },
  //表单创建时执行
  created: function() {
    //this.$data.tableShow = false;
    //this.userTagCombos();
    this.conQuery();
    //alert(0);
    //alert(this.qType);
  }
};
</script>

<style>

</style>